<template>
  <div>
    <div class="bg-color">
      <div>
        <!-------------------顶部状态------------------->
        <div class="order-detail-header" ref="orderHeader">
          <!--------------左侧文字信息---------------->
          <!------------------------------->
          <div v-if="orderDetail.wasSafeguard == 1">
            <div class="order-detail-status" v-if="safeguardDetail&&safeguardDetail.status==rfApply">
              <p>等待客服收货、验货</p>
              <p>请耐心等待，客服人员收到拍品后，会对其进行验货尽快给出维权结果</p>
            </div>
            <div class="order-detail-status" v-if="safeguardDetail&&safeguardDetail.status==rfAgree">
              <p>等待客服收货、验货</p>
              <p>自客服通过买家维权请求时起，买家<count-time :startTime="safeguardDetail.modTime" :totalTime="refundUndeliverTimeout" :timestamp="safeguardDetail.timestamp" endText="已经结束了"></count-time>内不发起退货，交易自动成功</p>
            </div>
            <div class="order-detail-status" v-if="safeguardDetail&&safeguardDetail.status==rfRefund">
              <p>等待客服收货、验货</p>
              <p>请耐心等待，客服人员收到拍品后，会对其进行验货尽快给出维权结果</p>
            </div>
            <div class="order-detail-status" v-if="safeguardDetail&&safeguardDetail.status==rfComplete">
              <p>退款成功</p>
              <p>买家支付金额已原路退还</p>
            </div>
            <!--<div class="order-detail-status" v-if="orderDetail.status == waitForEvaluation">-->
              <!--<p>交易成功</p>-->
              <!--<p>维权已处理，卖家无责</p>-->
            <!--</div>-->
          </div>
          <!--------------------------------->
          <div v-else>
            <div class="order-detail-status" v-if="orderDetail.status == waitForEvaluation||orderDetail.status == finished">
              <p>交易成功</p>
            </div>
            <div class="order-detail-status" v-if="orderDetail.status == waitForPay">
              <p>等待买家付款</p>
              <p>买家<count-time :startTime="orderDetail.createTime" :totalTime="orderUnpayTimeout" :timestamp="orderDetail.timestamp" endText="已经结束了"></count-time>内未完成付款，订单关闭，你将获得赔偿金￥{{orderDetail.cashDeposit | toDecimal}}</p>
            </div>
            <div class="order-detail-status" v-if="orderDetail.status == waitForReceive">
              <p>卖家已发货</p>
              <p>买家<count-time :startTime="orderDetail.deliveryTime" :totalTime="autoDeliveryTimeOut" :timestamp="orderDetail.timestamp" endText="已经结束了"></count-time>内未确认收货，交易自动成功</p>
            </div>
            <div class="order-detail-status" v-if="orderDetail.status == invalid">
              <p>订单关闭</p>
              <p v-if="orderDetail.closeType == 0">买家超时未付款，您获得赔偿金￥{{orderDetail.cashDeposit | toDecimal}}</p>
              <p v-else-if="orderDetail.closeType == 1">发货超时，买家支付金额已原路退还</p>
            </div>
          </div>
          <!-------------右侧图标------------->
          <div>
            <img v-if="orderDetail.status == invalid" src="../../../../../static/images/order/guanbi.png" alt="">
            <img v-else-if="orderDetail.status == waitForEvaluation||orderDetail.status == finished" src="../../../../../static/images/order/duihao.png" alt="">
            <img v-else src="../../../../../static/images/order/wait.png" alt="">
          </div>
        </div>

        <!------------------------收货地址----------------------------->
        <div class="order-address-box" ref="orderAddressBox"  v-if="orderDetail.wasSafeguard == 1" @click="goAddressList">
          <div class="order-address-content">
            <div class="order-user-info">
              <span>收货人：{{safeguardDetail.receiverName}}</span>
              <span>{{safeguardDetail.receiverMobileNo}}</span>
            </div>
            <p class="order-address-info">
              收货地址：{{safeguardDetail.addressProvince}} {{safeguardDetail.addressCity}} {{safeguardDetail.addressCounty}} {{safeguardDetail.address}}
            </p>
          </div>
          <div class="order-address-jiantou">
            <img src="../../../../../static/images/order/jiantou.png" alt="">
          </div>
        </div>
        <!-------------------------------------------->
        <div class="order-address-box" ref="orderAddressBox" v-else>
          <div class="order-address-content">
            <div class="order-user-info">
              <span>收货人：{{orderDetail.receiverName}}</span>
              <span>{{orderDetail.receiverMobileNo}}</span>
            </div>
            <p class="order-address-info">
              收货地址：{{orderDetail.addressProvince}} {{orderDetail.addressCity}} {{orderDetail.addressCounty}} {{orderDetail.address}}
            </p>
          </div>
        </div>

        <!-----------------订单详情--------------------->
        <div class="order-list" ref="orderList">
          <!-----------店铺名称---------->
          <div class="order-title-box">
            <div class="order-title">
              <router-link :to="{name:'shopDetail',query:{shopId:orderDetail.shopId}}" class="order-shop">{{orderDetail.shopName}}<img src="../../../../../static/images/order/jiantou.png" alt=""></router-link>
            </div>
          </div>
          <!-----------拍品信息---------->
          <a href="javascript:;" class="order-pro">
            <div class="order-pro-img" v-if="!orderDetail.productImageUrl"></div>
            <div class="order-pro-img" v-if="orderDetail.productImageUrl" :style="'backgroundImage: url('+(orderDetail.productImageUrl.substr(0,4).toLowerCase() == 'http' ? orderDetail.productImageUrl : resUrl+orderDetail.productImageUrl)+')'"></div>
            <div class="order-pro-name">{{orderDetail.productName}}</div>
            <div class="order-pro-type">
              <img src="../../../../../static/images/order/yikoujia.png" alt="">
              <!--<img  v-if="orderDetail.productType!=fixedPrice" src="../../../../../static/images/order/jinpai.png" alt="">-->
            </div>
          </a>
          <!-----------订单信息---------->
          <div class="order-info-box">
            <!-------订单金额------>
            <div class="order-info">
              <p>
                <span>拍品金额</span><span>￥{{(orderDetail.needPayMoney-orderDetail.postage) | toDecimal}}</span>
              </p>
              <p>
                <span>运费</span><span>￥{{orderDetail.postage | toDecimal}}</span>
              </p>
              <p class="order-price-total">
                <span v-if="orderDetail.status == waitForPay">买家需付金额</span>
                <span v-else>买家实付金额</span>
                <span>￥{{orderDetail.needPayMoney | toDecimal}}</span>
              </p>
            </div>
            <!-------订单编号------>
            <div class="order-info">
              <p>
                <span>订单编号</span>
                <span style="white-space: nowrap;overflow: hidden;">
              {{orderDetail.code}}
            </span>
              </p>
              <p v-if="orderDetail.wasSafeguard == 1">
                <span>买家申请退货时间</span>
                <span>{{safeguardDetail.createTime}}</span>
              </p>
              <p v-else>
                <span>{{orderDetail.status == waitForPay?'创建时间':'下单时间'}}</span>
                <span>{{orderDetail.createTime}}</span>
              </p>
            </div>
            <!-------支付方式------>
            <div class="order-info" v-if="orderDetail.status != waitForPay && orderDetail.status != invalid && orderDetail.accounTransactionPojo && orderDetail.wasSafeguard != 1">
              <!--<p>-->
                <!--<span>支付方式</span>-->
                <!--<span>{{payChannelName}}</span>-->
              <!--</p>-->
              <p>
                <span>买家支付时间</span><span>{{accounTransactionPojo.payTime}}</span>
              </p>
            </div>

            <!----售后订单物流信息---->
            <div class="order-info" v-if="orderDetail.wasSafeguard == 1&&(safeguardDetail.status==rfRefund||safeguardDetail.status==rfComplete)">
              <p>
                <span>物流公司</span>
                <span>{{safeguardDetail.expressName}}</span>
              </p>
              <p>
                <span>物流单号</span>
                <span>{{safeguardDetail.expressNo}}</span>
              </p>
              <p>
                <span>退货备注</span><span>{{safeguardDetail.expressContent}}</span>
              </p>
            </div>
            <!----正常订单物流信息---->
            <div class="order-info" v-if="orderDetail.wasSafeguard != 1 && (orderDetail.status == waitForReceive||orderDetail.status==waitForEvaluation||orderDetail.status == finished)">
              <p>
                <span>物流公司</span>
                <span>{{orderDetail.expressName}}</span>
              </p>
              <p>
                <span>物流单号</span>
                <span>{{orderDetail.expressNo}}<!--<span class="copy">复制</span>--></span>
              </p>
              <p>
                <span>发货备注</span><span>{{orderDetail.expressContent}}</span>
              </p>
              <p>
                <span>发货时间</span><span>{{orderDetail.deliveryTime}}</span>
              </p>
            </div>
            <!-------成交时间------>
            <div class="order-info" v-if="orderDetail.status==waitForEvaluation||orderDetail.status == finished">
              <p>
                <span>成交时间</span><span>{{orderDetail.collectTime}}</span>
              </p>
            </div>
            <!-----售后订单欲退款金额---->
            <div class="order-info" v-if="orderDetail.wasSafeguard == 1&&safeguardDetail.status!=rfComplete">
              <p class="order-price-total">
                <span>欲退还买家金额</span><span>￥{{safeguardDetail.needRefundMoney | toDecimal}}</span>
              </p>
              <p><span></span><span style="font-size: 0.6rem;color: #999999;">(含邮费 ￥{{orderDetail.postage | toDecimal}})</span></p>
            </div>
            <!-----售后订单退款金额---->
            <div class="order-info" v-if="orderDetail.wasSafeguard == 1&&safeguardDetail.status==rfComplete">
              <p class="order-price-total">
                <span>退还买家金额</span><span>￥{{safeguardDetail.needRefundMoney | toDecimal}}</span>
              </p>
              <p><span>退款时间</span><span>退款时间</span></p>
            </div>

            <!---------订单关闭------->
            <div class="order-info" v-if="orderDetail.status == invalid">
              <!---买家未支付扣除保证金金额--->
              <div v-if="orderDetail.closeType == 0">
                <p class="order-price-total">
                  <span>获得赔偿金金额</span><span>￥{{orderDetail.cashDeposit | toDecimal}}</span>
                </p>
                <p>
                  <span>入账编号</span>
                  <span>11111111111111111</span>
                </p>
                <p><span>入账时间</span><span>入账时间</span></p>
                <p><span>入账方式</span><span>微信</span></p>
                <p><span>入账账号</span><span>111********1</span></p>
              </div>
              <!---卖家未发货退款金额--->
              <div v-else-if="orderDetail.closeType == 1">
                <p class="order-price-total">
                  <span>退还买家金额</span><span>￥{{orderDetail.needPayMoney | toDecimal}}</span>
                </p>
                <p><span>退款时间</span><span>退款时间</span></p>
              </div>
            </div>



          </div>
        </div>
      </div>


      <div class="order-footer" ref="orderFooter">
        <div class="order-btn-box">
          <div  class="order-btn-left">
            <div v-if="orderDetail.wasSafeguard == 1">
              <span class="order-btn" v-if="safeguardDetail.status==rfComplete" @click="deleteOrder">删除订单</span>
            </div>
            <div v-else>
              <span class="order-btn" v-if="orderDetail.status==waitForReceive">客服维权</span>
              <span class="order-btn" v-if="orderDetail.status == finished||orderDetail.status == waitForEvaluation" @click="deleteOrder">删除订单</span>
            </div>
          </div>

          <div class="order-btn-right">
            <div  v-if="orderDetail.wasSafeguard == 1">
              <span class="order-btn order-btn-red" v-if="safeguardDetail.status==rfComplete" @click="deleteOrder">删除订单</span>
              <span class="order-btn order-btn-red" v-else>客服维权</span>
            </div>
            <div v-else>
              <span class="order-btn order-btn-red" v-if="orderDetail.status==waitForPay||orderDetail.status==waitForReceive||orderDetail.status==finished||orderDetail.status == waitForEvaluation">联系买家</span>
              <span class="order-btn order-btn-red" v-if="orderDetail.status==invalid" @click="deleteOrder">删除订单</span>
            </div>
          </div>

        </div>
      </div>

    </div>
    <payment :isShowPayment="isShowPayment" :orderDetail="orderDetail" v-on:listenToChildEvent="getShowPayment"></payment>
  </div>

</template>

<script>
  import '../../../../assets/css/order.css';
  import {ipconfig} from '../../../../assets/js/ipconfig';
  import {getStatusMapByKey,getStatusByKeyVal} from '../../../../assets/js/tools';
  import {getMyOrderDetail,deleteOrder,deliverReminding,collectOrder,getDefaultAddress} from '../../../../assets/js/getData';
  export default {
    name: "sellOrderDetail",
    data(){
      return {
        resUrl:ipconfig.resUrl,//图片、视频、音频等资源访问路径
        orderId:null,//订单ID
        orderDetail:{},//订单详情
        safeguardDetail:null,//售后详情
        accounTransactionPojo:null,//支付信息
        payChannelName:null,//支付方式名称
        address:{},

        isShowPayment:false,//是否显示支付

        orderUnpayTimeout:null,//超时未支付
        orderUndeliverTimeout:null,//超时未发货
        autoDeliveryTimeOut:null,//自动确认收获
        refundUndeliverTimeout:null,//售后超时发货


        waitForPay:null,//待付款5
        waitForDelivery:null,//待发货10
        waitForReceive:null,//待收货15
        waitForEvaluation:null,//待评价20
        paying:null,//支付中7
        invalid:null,//无效0
        finished:null,//交易完成50

        rfAgree:null,//客服同意受理15
        rfApply:null,//申请维权5
        rfComplete:null,//已完成99
        rfInvalid:null,//驳回 10
        rfRefund:null,//退货中20

        auction:null,//竞拍拍品
        fixedPrice:null,//一口价拍品
        fixedPriceAndAuction:null,//一口价与竞拍拍品
      }
    },
    created(){
      let eOrderStatus = getStatusMapByKey('eOrderStatus');
      this.invalid = eOrderStatus.invalid.val;//无效0
      this.paying = eOrderStatus.paying.val;//支付中7
      this.waitForPay = eOrderStatus.waitForPay.val;//待付款5
      this.waitForDelivery = eOrderStatus.waitForDelivery.val;//待发货10
      this.waitForReceive = eOrderStatus.waitForReceive.val;//待收货15
      this.waitForEvaluation = eOrderStatus.waitForEvaluation.val;//待评价20
      this.finished = eOrderStatus.finished.val;//交易完成50

      let eRefundStatus = getStatusMapByKey('eRefundStatus');
      this.rfAgree = eRefundStatus.agree.val;//客服同意受理15
      this.rfApply = eRefundStatus.apply.val;//申请维权5
      this.rfComplete = eRefundStatus.complete.val;//已完成99
      this.rfInvalid = eRefundStatus.invalid.val;//驳回 10
      this.rfRefund = eRefundStatus.refund.val;//退货中20

      let eProductType = getStatusMapByKey('eProductType');
      this.auction =  eProductType.auction.val;//竞拍拍品
      this.fixedPrice =  eProductType.fixedPrice.val;//一口价拍品
      this.fixedPriceAndAuction =  eProductType.fixedPriceAndAuction.val;//一口价与竞拍拍品

      this.orderId = this.$route.query.orderId;


      if(this.$route.query.hasOwnProperty('address')){
        this.address = this.$route.query.address;
        console.log(this.address);
      }
      //获取订单详情
      this.getMyOrderDetail();
    },
    methods:{
      //获取订单信息
      getMyOrderDetail(){
        getMyOrderDetail(this.orderId).then(res => {
          if(res.data.reqResult.code>0){
            this.orderDetail = res.data.data.data;
            this.orderUnpayTimeout = res.data.data.orderUnpayTimeout;//超时未支付
            this.orderUndeliverTimeout = res.data.data.orderUndeliverTimeout;//超时未发货
            this.autoDeliveryTimeOut = res.data.data.autoDeliveryTimeOut;//自动确认收获
            this.refundUndeliverTimeout = res.data.data.refundUndeliverTimeout;//售后超时发货
            if (this.orderDetail.hasOwnProperty('accounTransactionPojo')){
              this.accounTransactionPojo = this.orderDetail.accounTransactionPojo;
            }
            this.payChannelName = getStatusByKeyVal('ePayChannel',this.orderDetail.payChannel).name;
            // if(this.orderDetail.status == this.waitForPay&&!this.address){
            //   //获取默认地址
            //   getDefaultAddress().then(res => {
            //     if(res.data.reqResult.code>0){
            //       this.address = res.data.data;
            //     }else {
            //       Toast(res.data.reqResult.msg);
            //     }
            //   })
            // }
            console.log(res);
            if(this.orderDetail.wasSafeguard == 1){
              //获取售后信息
              this.safeguardDetail = this.orderDetail.mordRefundOrderPojo;
              console.log(this.safeguardDetail);
            }
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      },
      //删除订单
      deleteOrder(){
        MessageBox.confirm('确认删除该订单记录？','').then(() => {
          deleteOrder(this.orderId).then(res => {
            if(res.data.reqResult.code>0){
              this.$router.replace({name:'myOrder'});
            }else {
              Toast(res.data.reqResult.msg);
            }
          })
        }).catch(()=>{})
      },
      //提醒发货
      remind(){
        deliverReminding(this.orderId).then(res => {
          if(res.data.reqResult.code>0){
            Toast('提醒卖家发货成功');
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      },
      //确认收货
      collectGoods(){
        MessageBox.confirm('确认收货后，支付金额将打给卖家无法再发起维权，是否确认？','').then(() => {
          collectOrder(this.orderId).then(res => {
            if(res.data.reqResult.code>0){
              this.getMyOrderDetail();
            }else {
              Toast(res.data.reqResult.msg);
            }
          })
        }).catch(()=>{})
      },
      //待支付选择收货地址
      goAddressList(){
        this.$router.replace({name:'addressList',query:{source:'orderDetail',orderId:this.orderId}});
      },
      //立即付款
      showPayment(){
        this.isShowPayment = true;
      },
      getShowPayment(isShowPayment){
        this.isShowPayment = isShowPayment;
      }
    }
  }
</script>

<style scoped>
  .bg-color{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
</style>
